<template>
  <view class="search">
    <view class="search-box">
      <view class="search-left" @click="onScanCode">
        <up-icon name="scan" size="24" color="#66E87B"></up-icon>
      </view>
      <up-input
        placeholder="搜索商品名称/条形码"
        border="none"
        v-model="keyword"
        confirmType="search"
        @confirm="onSearch"
        @change="keywordChange"
        @clear="keywordChange"
        clearable
      ></up-input>
      <view class="search-btn" @click="onSearch">搜索</view>
    </view>

    <view class="search-log" v-if="searchLog.length > 0">
      <view class="log-top">
        <view class="log-top-title">
          <up-icon name="bag-fill" size="22" color="#ff0000"></up-icon>
          <view class="log-title">最近搜索</view>
        </view>
        <view class="log-del" @click="onDeleteTap">
          <up-icon name="trash-fill" size="24" color="#999999"></up-icon>
        </view>
      </view>
      <view class="log-list">
        <view
          class="log-item"
          v-for="(log, index) in searchLog"
          :key="index"
          @click="onLogTap(log)"
          >{{ log }}
        </view>
      </view>
    </view>

    <my-empty v-else type="search"></my-empty>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { route } from "@/uni_modules/uview-plus";
import { onShow } from "@dcloudio/uni-app";

const keyword = ref("");

const searchLog = ref([]);

function keywordChange() {}

function onLogTap(log) {
  keyword.value = log;
}

function onDeleteTap() {
  uni.showModal({
    title: "提示",
    content: "确定要清空搜索历史吗？",
    success: function (res) {
      if (res.confirm) {
        searchLog.value = [];
        uni.removeStorageSync("searchLog");
      }
    },
  });
}

function setSearchLog() {
  if (searchLog.value.includes(keyword.value)) return;
  searchLog.value.push(keyword.value);
  uni.setStorageSync("searchLog", searchLog.value);
}

function onSearch() {
  if (keyword.value) {
    const params = `?type=search&keyword=${keyword.value}`;
    uni.navigateTo({
      url: `/pages/goods/list${params}`,
      success: () => {
        setSearchLog();
      },
    });
  }
}

function onScanCode() {
  // 调起条码扫描
  uni.scanCode({
    scanType: ["barCode"],
    success: function (res) {
      console.log("条码类型：" + res.scanType);
      console.log("条码内容：" + res.result);
      uni.navigateTo({
        url: "/pages/goods/list?type=search&keyword=" + res.result,
      });
    },
    fail: function (err) {
      console.log(err);
      uni.showToast({
        title: "识别失败",
        icon: "error",
      });
    },
  });
}

onShow(() => {
  searchLog.value = uni.getStorageSync("searchLog") || [];
});
</script>

<style scoped lang="scss">
.search {
  min-height: 100vh;
  background-color: #ffffff;
  box-sizing: border-box;
  padding-top: 20rpx;

  .search-box {
    margin: 0 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f0f0f0;
    border-radius: 6rpx;

    .search-left {
      padding: 8rpx 10rpx;

      .icon {
        width: 50rpx;
        height: 50rpx;
        display: block;
      }
    }

    .search-btn {
      width: 140rpx;
      height: 100%;
      background-color: #66e87b;
      color: #ffffff;
      text-align: center;
      line-height: 60rpx;
      border-radius: 0 8rpx 8rpx 0;
      margin-left: 20rpx;
    }
  }

  .search-log {
    margin-top: 50rpx;
    padding: 0 20rpx;

    .log-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .log-top-title {
        display: flex;
        align-items: center;

        .log-title {
          font-size: 32rpx;
          font-weight: bold;
        }
      }
    }

    .log-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .log-item {
        padding: 6rpx 20rpx;
        background-color: #f1f2f3;
        border-radius: 6rpx;
        margin-right: 20rpx;
      }
    }
  }
}
</style>
